import { ref, watch } from 'vue'

const theme = ref(localStorage.getItem('theme') || 'light')

export function useTheme() {
    const toggleTheme = () => {
        theme.value = theme.value === 'light' ? 'dark' : 'light'
        localStorage.setItem('theme', theme.value)
        document.documentElement.setAttribute('data-theme', theme.value)
    }

    // 初始化主题
    watch(theme, (newTheme) => {
        document.documentElement.setAttribute('data-theme', newTheme)
    }, { immediate: true })

    return {
        theme,
        toggleTheme
    }
} 